<template>
  <el-row>
    <!--分类排序-->
    <el-row style="width: 100%; height: 10%;">
      <el-tabs v-model="activeName" style="width: 100%; height: 100%" @tab-click="handleClick">
        <el-tab-pane label="综合排序" name="first">
          <el-tag v-for="big in bigzone" style="float: left" @click="pitchQuery(big.bigzone_name)" type="success">
            <el-link type="primary" >{{ big.bigzone_name }} | {{ big.count }}</el-link>
          </el-tag>
        </el-tab-pane>
        <el-tab-pane label="最多点击" name="second">
          <el-tag v-for="big in bigzone" style="float: left" @click="pitchQuery1(big.bigzone_name)" type="success">
            <el-link type="primary">{{ big.bigzone_name }} | {{ big.count }}</el-link>
          </el-tag>
        </el-tab-pane>
        <el-tab-pane label="最多收藏" name="third">
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <!--没有数据-->
    <el-row v-if="historyList==''" style="text-align: center">
      <img src="../../../assets/img/nodata.png">
    </el-row>


    <!--数据显示-->
    <el-row v-if="historyList!=''">
      <el-row>
        <el-row
            class="video"
            style="float: left;height: 150px;padding: 0px 0px;display: inline-block;width: 20%;text-align: center "
            v-for="his in historyList">
          <el-image style="width: 150px;height: 100px;display: inline-block;border-radius: 5%;"
                    @click="jumpPath(his.video_id)"
                    :src="his.video_cover"></el-image>
          <el-row style="display: inline-block;width: 80%;color: #4d4d4d">
             <span class="jumptitle" style="float: left" @click="jumpPath(his.video_id)">
                  {{ his.video_title.substring(0, 7) + "..." }}
             </span><br>

            <span icon="logo-youtube" style="float: left">
                <Icon type="logo-youtube"/> {{ his.video_isreprint }}
            </span>
            <span>
              <Icon type="md-time"/>{{ his.video_createTime.toString().substring(0, 10) }}
            </span>
          </el-row>
        </el-row>
      </el-row>
      <el-row style="display: inline-block">
        <el-pagination
            style="float: right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout=" sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-row>
    </el-row>
  </el-row>
</template>

<script>
import {
  BigzoneByUserCount, CollectvideoUserById,
  PlayCounts,
  QueryUserId,
  SynthesizeQuery,
  SynthesizeQueryDesc
} from "../../../api/video/video";

export default {
  name: "othersvideo",
  data(){
    return{
      num: '1',
      bigzone: [],
      z: '',
      historyList: [],
      currentPage: 1,
      total: 10, // 总条目数
      pages: 5,  // 总页数
      pageNum: 1, // 当前的页码
      pageSizes: [5, 10, 15, 20, 30, 40, 50], // select选项设置：条/页
      pageSize: 15, // 每页显示条目个数
      activeName: 'first',
      bagname: '',
    }
  },
  created() {
    this.bigzoneByUserCount();
  },
  mounted() {
    let userId= this.$route.query.id;
    if (userId!=null&&userId!=''){
      this.playCounts();
      this.queryUserId();
    }
  },
  methods:{
    /**
     * 请求查询所有视频接口
     */
    queryUserId() {
      let userId= this.$route.query.id;
      QueryUserId(userId, this.pageNum, this.pageSize).then(result => {
        //console.log(result.data);
        this.total = result.data.total;
        this.pages = result.data.pages;
        this.pageNum = result.data.pageNum;
        this.pageSize = result.data.pageSize;
        this.historyList = result.data.list;
      })
    },
    /**
     * 用户视频发布总量
     */
    playCounts() {
      let userId= this.$route.query.id;
      PlayCounts(userId).then(result => {
        this.num = result.data;
      })
    },
    /**
     * 请求查询用户某个类型的视频数量
     */
    bigzoneByUserCount() {
      let userId= this.$route.query.id;
      BigzoneByUserCount(userId).then(result => {
        this.bigzone = result.data;
      })
    },
    /**
     * 页签跳动
     * @param tab
     * @param event
     */
    handleClick(tab, event) {
      //console.log(tab.index)
      var th = this;
      if (tab.index == 0) {
        this.queryUserId();
      } else if (tab.index == 1) {
        console.log("成功1111")
        th.synthesizeQueryDesc();
        console.log("2222")
      } else if (tab.index == 2) {
        th.collectvideoUserById();
      } else {
        this.historyList = '';
      }
    },
    /**
     * 请求根据点击量排序
     */
    synthesizeQueryDesc() {
      let userId= this.$route.query.id;
      SynthesizeQueryDesc(userId, null, this.pageNum, this.pageSize).then(result => {
        this.total = result.data.total;
        this.pages = result.data.pages;
        this.pageNum = result.data.pageNum;
        this.pageSize = result.data.pageSize;
        this.historyList = result.data.list;
      });
    },
    /**
     * 请求查询收藏视频接口
     */
    collectvideoUserById() {
      let userId= this.$route.query.id;
      CollectvideoUserById(userId, this.pageNum, this.pageSize).then(result => {
        this.total = result.data.total;
        this.pages = result.data.pages;
        this.pageNum = result.data.pageNum;
        this.pageSize = result.data.pageSize;
        this.historyList = result.data.list;
      })
    },
    /**
     * 点击类型事件
     * @param val
     */
    pitchQuery1(val) {
      console.log(val);
      let userId= this.$route.query.id;
      if (this.activeName === 'second') {
        if (val != null && val != '') {
          SynthesizeQueryDesc(userId, val, this.pageNum, this.pageSize).then(result => {
            console.log(result.data);
            this.total = result.data.total;
            this.pages = result.data.pages;
            this.pageNum = result.data.pageNum;
            this.pageSize = result.data.pageSize;
            this.historyList = result.data.list;
          })
          //  this.synthesizeQueryDesc();
        } else {
          this.historyList = '';
        }
      } else {
        this.historyList = '';
      }
    },
    pitchQuery(val) {
      this.bagname = val;
      let userId= this.$route.query.id;
      if (this.activeName === 'first') {
        if (val != null && val != '') {
          SynthesizeQuery(userId, val, this.pageNum, this.pageSize).then(result => {
            // console.log(result.data);
            this.total = result.data.total;
            this.pages = result.data.pages;
            this.pageNum = result.data.pageNum;
            this.pageSize = result.data.pageSize;
            this.historyList = result.data.list;
          });
        } else {
          this.historyList = '';
          console.log(this.$message.error("没有数据"))
        }
      } else {
        this.historyList = '';
      }
    },

    /**
     * 分页方法
     * @param val
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.queryUserId();
    },
    /**
     * 分页方法
     * @param val
     */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.queryUserId()
    },
    // 点击跳转路径
    jumpPath(keyword) {
      // this.$router.push(`/search?keyword=${keyword}`);
      let newUrl = this.$router.resolve({
        path: `/Vedios?id=${keyword}`
      });
      window.open(newUrl.href, "_blank");
    }
  }
}
</script>

<style scoped>
.video:hover{
  -moz-box-shadow:2px 2px 10px #99a2aa;
  -webkit-box-shadow:2px 2px 10px #99a2aa;
  box-shadow:2px 2px 10px #99a2aa;
}
</style>
